<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按钮渐变效果示例</title>
    <style>
        button {
            position: relative; /* 为伪元素提供定位上下文 */
            padding: 40px 60px; /* 增加内边距，让按钮更大 */
            border: none; /* 去除默认边框 */
            cursor: pointer; /* 鼠标指针变为手型 */
        }
        button::after{
            content: '';
            background-image: linear-gradient(to right, blue, pink); 
            position: absolute;
            height: 100%;
            width: 100%;
            padding: .1em;
            left: 50%;
            top: 50%;
            translate: -50% -50%;
            z-index: -1; 
        }
    </style>
</head>
<body>
    <!-- 添加按钮元素 -->
    <button>点击我</button>
    <p>
        这个按钮使用了伪元素 ::after 来创建一个渐变背景，然后通过 position: absolute 和 translate 属性来使其居中对齐。这样，按钮的背景就会随着按钮的大小变化而自适应。
    </p>
</body>
</html>